﻿@{
    ViewBag.Title = "Retailer Sales";
    ViewBag.Header = "Retailer Sales";
    ViewBag.BackUrl = Url.Action("Index", "Sales");
    LineFocus.Nikcron.Models.Lookup Retailer = ViewBag.Retailers;
    LineFocus.Nikcron.Models.Lookup States = ViewBag.States;
    LineFocus.Nikcron.Models.Lookup Countries = ViewBag.Countries;
}

@using (Html.BeginForm("RetailSales", "Sales", FormMethod.Post, new { onsubmit = "return ValidateForm();" }))
{
    <div class="col-md-12">
        <div class="box box-danger">
            <div class="box-body">

                <div class="form-group">
                    <label> Retailer:</label><span class="astrisk">*</span>
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class=""></i>
                        </div>
                        <select id="Retailer" name="Retailer" class="selectpicker">
                            @Html.Partial("Dropdown", Retailer)
                        </select>
                    </div><!-- /.input group -->
                </div><!-- /.form group -->




                <div class="form-group">
                    <label>Selling Date:</label><span class="astrisk">*</span>
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class="fa fa-calendar"></i>
                        </div>
                        <input name="SellingDate" id="SellingDate" type="text" data-mask="" data-inputmask="'alias': 'dd/mm/yyyy'" value="@DateTime.Today.ToShortDateString()" class="form-control bfh-datepicker">
                    </div><!-- /.input group -->
                </div><!-- /.form group -->


                <div class="form-group">
                    <label> IMEI# 1:</label><span class="astrisk">*</span>
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class=""></i>
                        </div>
                        <input id="IMEIno1" name="IMEIno1" maxlength="50" type="text" class="form-control" />
                        <input id="ProductItemId" name="ProductItemId" type="hidden" value="" />
                    </div><!-- /.input group -->
                </div><!-- /.form group -->

                <div class="form-group">
                    <label> IMEI# 2:</label><span class="astrisk">*</span>
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class=""></i>
                        </div>
                        <input id="IMEIno2" name="IMEIno2" maxlength="50" type="text" class="form-control" />
                    </div><!-- /.input group -->
                </div><!-- /.form group -->

                <div class="form-group">
                    <label> Serial# :</label><span class="astrisk">*</span>
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class=""></i>
                        </div>
                        <input id="Serial" name="Serial" maxlength="50" type="text" class="form-control" />
                    </div><!-- /.input group -->
                </div><!-- /.form group -->

                @*<div class="form-group">
                    <label>Product Type:</label><span class="astrisk">*</span>
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class=""></i>
                        </div>
                        <input id="ProductType" name="ProductType" maxlength="50" type="text" class="form-control" />
                    </div><!-- /.input group -->
                </div><!-- /.form group -->*@



                <div class="form-group">
                    <label>Product Model:</label><span class="astrisk">*</span>
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class=""></i>
                        </div>
                        <input id="ProductModel" name="ProductModel" maxlength="150" type="text" class="form-control" />
                    </div><!-- /.input group -->
                </div><!-- /.form group -->

                <div class="form-group">
                    <label> Selling Amount:</label><span class="astrisk">*</span>
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class=""></i>
                        </div>
                        <input id="SaleAmount" name="SaleAmount" maxlength="50" type="text" class="form-control" />
                    </div><!-- /.input group -->
                </div><!-- /.form group -->


                <div class="form-group">
                    <label>Warrenty start Date:</label><span class="astrisk">*</span>
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class="fa fa-calendar"></i>
                        </div>
                        <input name="DOS" id="DOS" type="text" data-mask="" data-inputmask="'alias': 'dd/mm/yyyy'" class="form-control bfh-datepicker">
                    </div><!-- /.input group -->
                </div><!-- /.form group -->


                <div class="form-group">
                    <label>Warrenty End Date:</label><span class="astrisk">*</span>
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class="fa fa-calendar"></i>
                        </div>
                        <input name="DOE" id="DOE" type="text" data-mask="" data-inputmask="'alias': 'dd/mm/yyyy'" class="form-control bfh-datepicker">
                    </div><!-- /.input group -->
                </div><!-- /.form group -->


                <div class="form-group">
                    <label> Comments:</label>
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class=""></i>
                        </div>
                        <textarea id="Comments" name="Comments" class="form-control pull-right"></textarea>
                    </div><!-- /.input group -->
                </div><!-- /.form group -->
                    <div class="form-group">
                        <label>Customer Details</label>
                    </div>
                    <div class="box box-primary">
                        <div class="box-body">

                            <div class="form-group">
                                <label>FirstName:</label><span class="astrisk">*</span>
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i></i>
                                    </div>
                                    <input id="FirstName" name="FirstName" maxlength="50" type="text" class="form-control" />
                                </div><!-- /.input group -->
                            </div><!-- /.form group -->

                            <div class="form-group">
                                <label>LastName:</label><span class="astrisk">*</span>
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i></i>
                                    </div>
                                    <input id="LastName" name="LastName" maxlength="50" type="text" class="form-control" />
                                </div><!-- /.input group -->
                            </div><!-- /.form group -->

                            <div class="form-group">
                                <label> Address 1:</label>
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i class=""></i>
                                    </div>
                                    <textarea id="PresentAddress" name="PresentAddress" maxlength="500" class="form-control"></textarea>
                                </div><!-- /.input group -->
                            </div><!-- /.form group -->

                            <div class="form-group">
                                <label> Address 2:</label>
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i class=""></i>
                                    </div>
                                    <textarea id="PermanentAddress" name="PermanentAddress" maxlength="500" class="form-control"></textarea>
                                </div><!-- /.input group -->
                            </div><!-- /.form group -->

                            <div class="form-group">
                                
                                <label> City:</label>
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i class=""></i>
                                    </div>
                                    <input id="City" name="City" maxlength="250" type="text" class="form-control" />
                                </div><!-- /.input group -->
                            </div><!-- /.form group -->

                            
                            <div class="form-group">
                                <label> State:</label>
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i></i>
                                    </div>
                                    <select id="State" name="State" class="selectpicker">
                                        @Html.Partial("SelectList", States)
                                    </select>
                                </div><!-- /.input group -->
                            </div><!-- /.form group -->

                            <div class="form-group">
                                <label> Country:</label>
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i></i>
                                    </div>
                                    <select id="Country" name="Country" class="selectpicker">
                                        @Html.Partial("SelectList", Countries)
                                    </select>
                                </div><!-- /.input group -->
                            </div><!-- /.form group -->

                            <div class="form-group">
                                <label> Zip:</label>
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i class=""></i>
                                    </div>
                                    <input id="Zip" name="Zip" type="text" class="form-control" />
                                </div><!-- /.input group -->
                            </div><!-- /.form group -->

                            <div class="form-group">
                                <label> Mobile Number:</label><span class="astrisk">*</span>
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i class=""></i>
                                    </div>
                                    <input id="Mobile" name="Mobile" type="text" class="form-control pull-right" />
                                </div><!-- /.input group -->
                            </div><!-- /.form group -->

                            <div class="form-group">
                                <label> Phone Number:</label>
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i></i>
                                    </div>
                                    <input id="Phone" name="Phone" type="text" class="form-control pull-right" />
                                </div><!-- /.input group -->
                            </div><!-- /.form group -->

                            <div class="form-group">
                                <label> Email ID:</label>
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i></i>
                                    </div>
                                    <input id="Email" name="Email" type="text" class="form-control pull-right" />
                                </div><!-- /.input group -->
                            </div><!-- /.form group -->
                        </div>
                    </div>
                    <div class="box-footer">
                        <input type="hidden" name="UserId" id="Id" />
                        <button type="submit" class="btn btn-primary" style=" width:80px;">Save</button>
                        <button type="reset" class="btn btn-primary" style=" width:80px;">Cancel</button>
                    </div>
                
                </div><!-- /.box-body -->
                </div><!-- /.box -->
            </div><!-- /.col (left) -->
}


<script>
    $(".selectpicker").selectpicker();
    $('.bfh-datepicker').datepicker();

    function AutoCompleteCity()
    {
        $("#City").autocomplete({
            source: function (request, response) {
                var cities = new Array();
                $.ajax({
                    async: false,
                    cache: false,
                    type: "POST",
                    url: "@Url.Action("GetCities", "Master")",
                    data: { "Name": request.term },
                success: function (data) {
                    for (var i = 0; i < data.length ; i++) {
                        cities[i] = { label: data[i].Name, Id: data[i].Id };
                    }
                }
            });
        response(cities);
    },
    select: function (event, ui) {
        $.ajax({
            cache: false,
            async: false,
            type: "POST",
            url: "@(Url.Action("GetStateCountry", "Master"))",
            data: { "CityId": ui.item.Id },
        success: function (data) {
            $('select#State').selectpicker("val", data[0].StateName);
            $('select#Country').selectpicker("val",data[0].CountryName);
        },
        error: function (xhr, ajaxOptions, thrownError) {
        }
    });
    }
    });
    }

    $(document).ready(function () {

        AutoCompleteCity();
        $('#Retailer')[0].selectedIndex = -1;
        $('*[data-id="Retailer"]').prop("title", "");
        $('*[data-id="Retailer"]').html('<span class="filter-option pull-left" />&nbsp;<span class="caret" />');

        $('#State')[0].selectedIndex = -1;
        $('*[data-id="State"]').prop("title", "");
        $('*[data-id="State"]').html('<span class="filter-option pull-left" />&nbsp;<span class="caret" />');

        $('#Country')[0].selectedIndex = -1;
        $('*[data-id="Country"]').prop("title", "");
        $('*[data-id="Country"]').html('<span class="filter-option pull-left" />&nbsp;<span class="caret" />');

    });

    function ValidateForm() {
        RequiredDropdown("Retailer", -1, "Select a Retailer");
        RequiredTextbox("SellingDate", "Enter the Selling Date");
        RequiredTextbox("IMEIno1", "Enter the IMEI No1");
        RequiredTextbox("FirstName", "Enter the Customer Name");
        RequiredTextbox("Mobile", "Enter the Customer Mobile#");
        if (AlertError())
        {
            $('#IMEIno2').removeAttr("disabled");
            $('#Serial').removeAttr("disabled");
            $('#DOS').removeAttr("disabled");
            $('#DOE').removeAttr("disabled");
        }
    }

    $('#IMEIno1').change(function () {
        if ($(this).val() != "") {
            var url = '@Url.Action("GetProductItemDetailsForSales", "Sales")';
            url += "?IMEINo=" + $('#IMEIno1').val() + "&IsRetailSale=1";
            $.getJSON(url, function (result) {
                if (result != null && result != undefined) {
                    productItem = result[0];
                    var mn = result[0].Brand + "-" + result[0].Model;
                    $('#ProductModel').val(mn);
                    $('#SaleAmount').val(parseFloat(result[0].UnitPrice).toFixed(2));
                    $('#IMEIno2').val(result[0].IMEI2);
                    $('#Serial').val(result[0].SerialNo);
                    $('#DOS').val('@DateTime.Today.ToShortDateString()');
                    $('#DOE').val('@DateTime.Today.AddYears(1).ToShortDateString()');
                    $('#ProductItemId').val(result[0].ItemId);

                    $('#ProductModel').attr("disabled", true);
                    $('#SaleAmount').removeAttr("disabled");
                    $('#IMEIno2').attr("disabled", true);
                    $('#Serial').attr("disabled", true);
                    $('#DOS').attr("disabled", true);
                    $('#DOE').attr("disabled", true);
                    validProduct = true;
                }
                else {
                    productItem = undefined;
                    $('#ProductModel').val("");
                    $('#SaleAmount').val("");
                    $('#Model').attr("disabled", true);
                    $('#SaleAmount').attr("disabled", true);
                    validProduct = false;
                    //$('#btnIMEI').attr("disabled", true);
                }

            });
            return false;
        }
        else {
            validProduct = false;
            $('#ProductModel').text("");
            $('#SaleAmount').text("");
            $('#SaleAmount').attr("disabled", true);
            alert("Enter IMEI #");
            $('#btnIMEI').attr("disabled", true);
            return false;
        }
    });
</script>